<template>
    <div class="app-container">
        <el-tabs v-model="captainListTabModal" type="card" @tab-click="handleChangeTab">
            <el-tab-pane label="团长列表" name="list">
                <el-card class="filter-container" shadow="never">
                    <el-row>
                        <i class="el-icon-search"></i>
                        <span>筛选搜索</span>
                    </el-row>
                    <el-row class="row-margin">
                        <el-form :model="listQuery1" ref="filterFormRef1" inline>
                            <el-form-item prop="status" label="状态查询">
                                <el-select v-model="listQuery1.status" placeholder="状态查询">
                                    <el-option label="所有" value=""></el-option>
                                    <el-option label="审核通过" value="APPROVAL"></el-option>
                                    <el-option label="审核未通过" value="REJECTED"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="queryInfo">
                                <el-input
                                    style="width:400px;margin-left: 10px;"
                                    clearable
                                    placeholder="团长名称／社区店／名字／手机号码"
                                    suffix-icon="el-icon-search"
                                    v-model="listQuery1.queryInfo"
                                >
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button
                                    style="margin-left: 10px;"
                                    @click="handleSearchCaptainList1()"
                                    type="primary"
                                >
                                    查询
                                </el-button>
                                <el-button @click="handleResetCaptainSearch1()">
                                    重置
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </el-row>
                </el-card>
                <div class="table-container">
                    <el-table
                        ref="captainListTable1Ref"
                        :data="captainDataList1"
                        style="width: 100%"
                        v-loading="listLoading1"
                        border
                    >
                        <el-table-column label="团长信息" align="center">
                            <template slot-scope="scope">{{ scope.row.name }}</template>
                        </el-table-column>
                        <el-table-column label="社区店名称" align="center">
                            <template slot-scope="scope">{{ scope.row.communityName }}</template>
                        </el-table-column>
                        <el-table-column label="社区店地址" align="center">
                            <template slot-scope="scope">{{ scope.row.detailAddress }}</template>
                        </el-table-column>
                        <el-table-column label="提货地址" align="center">
                            <template slot-scope="scope">{{ scope.row.deliveryAddress }}</template>
                        </el-table-column>
                        <el-table-column label="加入时间" width="140" align="center">
                            <template slot-scope="scope">{{ scope.row.createTime }}</template>
                        </el-table-column>
                        <el-table-column label="销售金额" width="100" align="center">
                            <template slot-scope="scope">{{ scope.row.socialName }}</template>
                        </el-table-column>
                        <el-table-column label="利润" width="100" align="center">
                            <template slot-scope="scope">{{ scope.row.socialName }}</template>
                        </el-table-column>
                        <el-table-column label="订单数" width="100" align="center">
                            <template slot-scope="scope">{{ scope.row.sale }}</template>
                        </el-table-column>
                        <el-table-column label="最近下单时间" width="100" align="center">
                            <template slot-scope="scope">{{ scope.row.socialName }}</template>
                        </el-table-column>
                        <el-table-column label="状态" width="100" align="center">
                            <template slot-scope="scope">{{ scope.row.socialName }}</template>
                        </el-table-column>
                        <el-table-column label="本月激励" width="100" align="center">
                            <template slot-scope="scope">{{ scope.row.socialName }}</template>
                        </el-table-column>
                        <el-table-column label="操作" width="160" align="center">
                            <template slot-scope="scope">
                                <p>
                                    <el-button
                                        size="mini"
                                        type="primary"
                                        @click="handleEditCaptain(scope.row.headId)"
                                        >编辑
                                    </el-button>
                                    <pop-confirm
                                        @confirm="handleBackCaptain(scope.row.headId)"
                                        okText="清退"
                                        cancelText="取消"
                                        title="清退"
                                    >
                                        <el-button size="mini" type="danger">清退 </el-button>
                                    </pop-confirm>
                                    <el-button
                                        style="margin-top:12px"
                                        size="mini"
                                        @click="handleViewCaptainOrders(scope.row.headId)"
                                        >订单
                                    </el-button>
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination-container">
                    <el-pagination
                        background
                        @size-change="handleSizeChange1"
                        @current-change="handleCurrentChange1"
                        layout="total, sizes,prev, pager, next,jumper"
                        :page-size="listQuery1.pageSize"
                        :page-sizes="[5, 10, 15]"
                        :current-page.sync="listQuery1.pageNum"
                        :total="total1"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="团长审核" name="review">
                <el-card class="filter-container" shadow="never">
                    <el-row>
                        <i class="el-icon-search"></i>
                        <span>筛选搜索</span>
                    </el-row>
                    <el-row class="row-margin">
                        <el-form :model="listQuery2" ref="filterFormRef2" inline>
                            <el-form-item prop="status" label="状态查询">
                                <el-select v-model="listQuery2.status" placeholder="审核状态">
                                    <el-option label="所有" value=""></el-option>
                                    <el-option label="审核通过" value="APPROVAL"></el-option>
                                    <el-option label="审核未通过" value="REJECTED"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="queryInfo"
                                ><el-input
                                    style="width:400px;margin-left: 10px;"
                                    clearable
                                    placeholder="团长名称／社区店／名字／手机号码"
                                    suffix-icon="el-icon-search"
                                    v-model="listQuery2.queryInfo"
                                >
                                </el-input
                            ></el-form-item>
                            <el-form-item>
                                <el-button
                                    style="margin-left: 10px;"
                                    @click="handleSearchCaptainList2()"
                                    type="primary"
                                >
                                    查询
                                </el-button>
                                <el-button @click="handleResetCaptainSearch2()">
                                    重置
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </el-row>
                </el-card>
                <div class="table-container">
                    <el-table
                        ref="captainListTable2Ref"
                        :data="captainDataList2"
                        style="width: 100%"
                        v-loading="listLoading2"
                        border
                    >
                        <el-table-column label="团长信息" width="100" align="center">
                            <template slot-scope="scope">{{ scope.row.name }}</template>
                        </el-table-column>
                        <el-table-column label="社区店名称" width="120" align="center">
                            <template slot-scope="scope">{{ scope.row.communityName }}</template>
                        </el-table-column>
                        <el-table-column label="社区店地址" align="center">
                            <template slot-scope="scope">{{ scope.row.community }}</template>
                        </el-table-column>
                        <el-table-column label="提货地址" width="200" align="center">
                            <template slot-scope="scope">{{ scope.row.deliveryAddress }}</template>
                        </el-table-column>
                        <el-table-column label="申请时间" width="140" align="center">
                            <template slot-scope="scope">{{ scope.row.createTime }}</template>
                        </el-table-column>
                        <el-table-column label="状态" width="140" align="center">
                            <template slot-scope="scope">{{ scope.row.status }}</template>
                        </el-table-column>
                        <el-table-column label="操作" width="160" align="center">
                            <template slot-scope="scope">
                                <pop-confirm
                                    @cancel="handleReviewReject(scope.row.id)"
                                    @confirm="handleReviewPass(scope.row.id)"
                                    okText="通过"
                                    cancelText="拒绝"
                                    title="审核"
                                >
                                    <el-button size="mini">审核</el-button>
                                </pop-confirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination-container">
                    <el-pagination
                        background
                        @size-change="handleSizeChange2"
                        @current-change="handleCurrentChange2"
                        layout="total, sizes,prev, pager, next,jumper"
                        :page-size="listQuery2.pageSize"
                        :page-sizes="[5, 10, 15]"
                        :current-page.sync="listQuery2.pageNum"
                        :total="total2"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-dialog :visible="editCaptainModalVisible" title="修改团长信息">
            <edit-captain-form-modal :headId="curHeadId" @hide="handleCaptainFormModalHide">
            </edit-captain-form-modal>
        </el-dialog>
    </div>
</template>
<script>
import {
    getCaptainQueryList,
    getCaptainAuditList,
    getCaptain,
    editCaptain,
    captainAdudit,
    captainStop
} from '@/api/captain';
import PopConfirm from '@/components/PopConfirm/popConfirm';
import EditCaptainFormModal from './components/editCaptainFormModal';
const defaultListQuery1 = {
    condition: '',
    pageNum: 1,
    pageSize: 5,
    status: null
};
const defaultListQuery2 = {
    queryInfo: '',
    pageNum: 1,
    pageSize: 5,
    status: null
};
export default {
    components: {
        PopConfirm,
        EditCaptainFormModal
    },
    data() {
        return {
            nameSearchInput: '',
            captainListTabModal: 'list',
            captainDataList1: [],
            captainDataList2: [],
            listLoading1: false,
            listLoading2: false,
            listQuery1: Object.assign({}, defaultListQuery1),
            listQuery2: Object.assign({}, defaultListQuery2),
            total1: 0,
            total2: 0,
            curHeadId: null,
            editCaptainModalVisible: false
        };
    },
    created() {
        this.getCaptainList1();
        this.getCaptainList2();
    },
    watch: {},
    filters: {},
    methods: {
        handleChangeTab(val) {
            if (val.name === 'list') {
                this.getCaptainList1();
            } else if (val.name === 'review') {
                this.getCaptainList2();
            }
        },
        getCaptainList1() {
            this.listLoading1 = true;
            getCaptainQueryList(this.listQuery1).then(res => {
                this.listLoading1 = false;
                if (res.data.success && Array.isArray(res.data.data)) {
                    this.captainDataList1 = res.data.data;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        getCaptainList2() {
            this.listLoading2 = true;
            getCaptainAuditList(this.listQuery2).then(res => {
                this.listLoading2 = false;
                if (res.data.success && Array.isArray(res.data.data)) {
                    this.captainDataList2 = res.data.data;
                    this.total2 = res.data.extra.total;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        handleEditCaptain(headId) {
            this.curHeadId = headId;
            this.editCaptainModalVisible = true;
        },
        handleBackCaptain(headId) {
            captainStop(headId).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '清退成功!',
                        type: 'info',
                        duration: 1000
                    });
                    this.getCaptainList1();
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        handleViewCaptainOrders() {},
        handleSearchCaptainList1() {
            this.listQuery1.pageNum = 1;
            this.getCaptainList1();
        },
        handleResetCaptainSearch1() {
            this.$refs.filterFormRef1.resetFields();
        },
        handleSearchCaptainList2() {
            this.listQuery2.pageNum = 1;
            this.getCaptainList2();
        },
        handleResetCaptainSearch2() {
            this.$refs.filterFormRef2.resetFields();
        },
        handleSizeChange1(val) {
            this.listQuery1.pageNum = 1;
            this.listQuery1.pageSize = val;
            this.getCaptainList1();
        },
        handleCurrentChange1(val) {
            this.listQuery1.pageNum = val;
            this.getCaptainList1();
        },
        handleSizeChange2(val) {
            this.listQuery2.pageNum = 1;
            this.listQuery2.pageSize = val;
            this.getCaptainList2();
        },
        handleCurrentChange2(val) {
            this.listQuery2.pageNum = val;
            this.getCaptainList2();
        },
        // 审核
        handleReviewPass(id) {
            captainAdudit({ id, status: 'APPROVAL' }).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '审核通过!',
                        type: 'info',
                        duration: 3000
                    });
                    this.getCaptainList2();
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        handleReviewReject(id) {
            captainAdudit({ id, status: 'REJECTED' }).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '审核拒绝!',
                        type: 'info',
                        duration: 3000
                    });
                    this.getCaptainList2();
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        handleCaptainFormModalHide() {
            this.editCaptainModalVisible = false;
        }
    }
};
</script>
<style></style>
